<template>
  <view class="complain">
    <view class="content">
      <view class="form">
        <view class="form-item">
          <view class="label"> 投诉举报类型 </view>
          <input type="text" placeholder="填写类型" />
        </view>
        <view class="form-item">
          <view class="label"> 下单状态 </view>
          <view class="check">
            <view class="check-item">
              <image src="../../static/icon/shop/checked.png" v-if="isChecked"/>
              <image src="../../static/icon/shop/check.png" v-else/>已下单
            </view>
            <view class="check-item">
              <image src="../../static/icon/shop/check.png" v-if="isChecked"/>
              <image src="../../static/icon/shop/checked.png" v-else/>未下单
            </view>
          </view>
        </view>
        <view class="form-item">
          <view class="label"> 联系电话 </view>
          <input type="text" placeholder="请填写您的电话号码" />
        </view>
        <view class="intro">
          <textarea placeholder="请详细描述投诉举报的内容,平台会依法处理该商家"></textarea>
          <view class="upload"></view>
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <view class="btn"> 提交信息 </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  const isChecked = ref(true)
</script>

<style lang="scss" scoped>
  .complain {
    padding: 12px;
    box-sizing: border-box;
    .content {
      background-color: #fff;
      border-radius: 10px;
      padding: 16px;
      box-sizing: border-box;
      .form {
        .form-item {
          line-height: 50px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: #EEEEEE solid 1px;
          box-sizing: border-box;
          .label {
            font-size: 16px;
            color: #333333;
          }
          input {
            text-align: right;
          }
          .check {
            display: flex;
            .check-item {
              display: flex;
              align-items: center;
              font-weight: 400;
              font-size: 14px;
              color: #666666;
              image {
                width: 20px;
                height: 20px;
                margin-right: 4px;
              }
              &:nth-of-type(1) {
                margin-right: 28px;
              }
            }
          }
        }
        .intro {
          min-height: 180px;
          padding-top: 16px;
          box-sizing: border-box;
          textarea {
            font-size: 14px;
            color: #C4C4C4;
          }
          .upload {
            position: relative;
            width: 74px;
            height: 74px;
            background: #F4F4F4;
            border-radius: 10px;
            &::after {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              display: block;
              content: '';
              width: 24px;
              height: 2px;
              background: #D8D8D8;
            }
            &::before {
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              display: block;
              content: '';
              width: 2px;
              height: 24px;
              background: #D8D8D8;
            }
          }
        }
      }
    }
    .btn {
      position: fixed;
      bottom: 12px;
      left: 12px;
      right: 12px;
      text-align: center;
      height: 50px;
      line-height: 50px;
      color: #FFFFFF;
      background: #FF3B1E;
      border-radius: 106px;
    }
  }
</style>
